// https://juejin.cn/post/7236314072765202488#heading-7
// https://juejin.cn/post/7020964728386093093
const ws = new WebSocket('ws://localhost:3000')
console.log('ws', ws)
const TodoType = 'todo'
const heartCheckType = 'ping'

// client 端 通过 http 请求初始化信息
const wsBaseInfo = {
	id: '001',
	name: '张三',
	todoNum: 0,
	type: TodoType,
}
// client 端，心跳保活信息
const heartCheckInfo = {
	type: heartCheckType,
}

function handleOpen(e) {
	console.log('client 连接上 server', e)
	ws.send(JSON.stringify(wsBaseInfo))
}

function updateTodoView(todoNum) {
	const todoDom = document.querySelector('#todo')
	todoDom.textContent = todoNum
}

// 前端解决方案：心跳检测
var heartCheck = {
	timeout: 30000, //30秒发一次心跳
	timeoutObj: null,
	serverTimeoutObj: null,
	reset: function () {
		clearTimeout(this.timeoutObj)
		clearTimeout(this.serverTimeoutObj)
		return this
	},
	start: function () {
		var self = this
		this.timeoutObj = setTimeout(function () {
			//这里发送一个心跳，后端收到后，返回一个心跳消息，
			//onmessage拿到返回的心跳就说明连接正常
			ws.send(JSON.stringify(heartCheckInfo))

			self.serverTimeoutObj = setTimeout(function () {
				//如果超过一定时间还没重置，说明后端主动断开了
				close()
			}, self.timeout)
		}, this.timeout)
	},
}

function handleMessage(e) {
	/* MessageEvent */
	// console.log('[message from server]', e)
	// console.log('[e.target]', e.target)

	/* 模拟手动关闭websocket */
	// setTimeout(() => {
	//     close()
	// })

	// 后端推送待办数量，并在前端显示
	if (e.data) {
		const message = JSON.parse(e.data)
		if (message.type === TodoType) {
			updateTodoView(message.todoNum)
		} else if (message.type === heartCheckType) {
			heartCheck.reset().start()
		}
	}
}

function handleClose(e) {
	// 清除定时器
	console.log('e', e)
	heartCheck.reset()
}

function close() {
	// 判断是否是正常关闭，如果是正常关闭，直接调用关闭。如果非正常关闭，需要重连
	ws.close()
}

// 初始化页面待办数量
updateTodoView(wsBaseInfo.todoNum)
// 监听 ws 相关事件
ws.addEventListener('open', handleOpen)
ws.addEventListener('message', handleMessage)
ws.addEventListener('close', handleClose)

// 心跳保活
heartCheck.start()
